<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿学习网-课程学习</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../../sweetAlert/sweetalert.css">
    <link rel="ICON" href="../../image/projectImage/icon1.png">
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css">
    <style>
        .article_box>p>img{
            display: block;
            max-width: 80%;
        }
    </style>
</head>
<body>
<header id="header-box">
    <nav class="navbar navbar-default m-b-0"  >
        <div class="container-fluid"  >
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./../../my_home">码猿</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./../../my_home"><i class="fa fa-home m-r-5"></i>主页</a></li>
                    <li class="active"><a href="./../../my_library"><i class="fa fa-book m-r-5"></i>文库</a></li>
                    <li><a href="./../../my_notes"><i class="fa fa-pencil-square-o m-r-5"></i>笔记</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${#httpServletRequest.remoteUser}==null">
                    <li><a href="./../../userLogin">未登录</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${#httpServletRequest.getAttribute('Username')}!=null">
                    <li class="dropdown">
                        <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 9px 15px">[[${#httpServletRequest.getAttribute("Username")}]]<img class="m-l-5" th:src="'./../../image/userImage/'+${#httpServletRequest.remoteUser}+'/userInfo.png'" alt=""><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a th:href="'./../../userInfo?userAccount='+${#httpServletRequest.remoteUser}">用户信息</a></li>
                            <li><a href="./../../changePassword">修改密码</a></li>
                            <li><a th:href="'./../../writeArticle?userAccount='+${#httpServletRequest.remoteUser}">发布博客</a></li>
                            <li>
                                <form class="p-0" style="color: #4c4c4c;cursor: pointer;" th:action="@{./../../logout}" method="post" id = "logoutForm">
                                    <a style="color: #333; padding: 3px 20px" onclick="javascript:$('#logoutForm').submit()"/>退出登录</a>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control"  placeholder="Search" v-model="researchText">
                        <span class="input-group-addon btn btn-info" v-on:click="researchUrl='./../../researchPage';research_btn()"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="Sidebar">
        <a href="./../../my_home" title="码猿主页"><i class="fa fa-home fa-lg"></i></a>
        <a href="javascript:;" class="stick" title="置顶" style="display: none"><i class="fa fa-eject"></i></a>
    </div>
</header>
<div class="center clear" id="card-box">
    <div class="container">
        <div class="details-position">
            <a href="./../../my_home">首页</a><span> > </span><a href="./../../my_library">博客</a><span> > </span><a>
            <div v-cloak>{{libraryDetail.libraryName}}</div></a><span> > </span><a>
            <div href="javascript:;">博客详情</div></a>
        </div>
        <div class="m-t-20" style="box-shadow: 2px 2px 5px #333; padding: 25px 20px">
            <h1 class="text-center p-b-10 p-t-10">{{libraryDetail.articleTitle}}</h1>
            <p style="color: #555;" class="p-l-20 p-r-20">
                <span class="f-r">发布时间：{{articleDate}}</span>
                <span class="m-r-20">作者：{{libraryDetail.publisher}}</span>
            </p>
            <hr>
            <div v-html="article" class="article_box">
                <div>{{article}}</div>
            </div>
        </div>
        <div class="m-t-20" style="box-shadow: 2px 2px 5px #333; padding: 25px 20px">
            <div class="show-comment" style="height: 300px">

            </div>
            <hr>
            <div class="input-comment">
                <textarea class="" rows="5" style="resize:none;width: 100%" v-model="commentText"></textarea>
                <a href="javascript:;" class="btn btn-info" v-on:click="comment_btn()">发送</a>
            </div>
        </div>
    </div>
</div>
<footer class="footer m-t-35">
    <div class="container text-center">
        <div class="row footer-top m-t-35">
            <div class="footer-icon">
                <a href="#" class="m-r-25" title="新浪微博"><i class="fa fa-weibo fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="微信"><i class="fa fa-weixin fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="腾讯QQ"><i class="fa fa-qq fa-2x"></i></a>
                <a href="#" title="Github"><i class="fa fa-github-alt fa-2x"></i></a>
            </div>
        </div>
        <div class="footer-link m-t-5">
            <!-- <a href="/about/us" target="_blank" title="关于我们">关于我们</a> -->
            <a href="" target="_blank" title="企业合作" class="m-r-25">企业合作</a>
            <a href="" target="_blank" title="人才招聘" class="m-r-25">人才招聘</a>
            <a href="" target="_blank" title="联系我们" class="m-r-25">联系我们</a>
            <a href="" target="_blank" title="讲师招募" class="m-r-25">讲师招募</a>
            <a href="" target="_blank" title="常见问题" class="m-r-25">常见问题</a>
            <a href="" target="_blank" title="意见反馈" class="m-r-25">意见反馈</a>
            <a href="" target="_blank" title="意见反馈" class="m-r-25">慕课大学</a>
            <a href="" target="_blank" title="友情链接">友情链接</a>
        </div>
        <div class="row footer-bottom">
            <p>ML&nbsp;&nbsp;&copy;&nbsp;2017-2017&nbsp;&nbsp;<a href="my_home.html">码猿学习网</a>&nbsp;&nbsp;版本所有</p>
        </div>
    </div>
</footer>
<script src="../../js/jquery-3.0.0.min.js"></script>
<script src="../../bootstrap/bootstrap.min.js"></script>
<script src="../../sweetAlert/sweetalert.min.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/public.js"></script>
<script src="../../editormd/lib/marked.min.js"></script>
<script>
    var vm_libraryDetail=new Vue({
        el: "#card-box",
        data: {
            bool_loading: true,//是否在加载数据
            libraryDetail:'',
            articleDate:'',
            article:'',
            commentText:'',
        },
        updated:function () {
        },
        methods: {
            comment_btn:function () {
                var comment={
                    commentToWhoAccount:'',
                    commentText:'',
                    articleCode:''
                }
                comment.commentToWhoAccount=this.libraryDetail.publisherAccount;
                comment.commentText=this.commentText;
                comment.articleCode=this.libraryDetail.articleCode;
                console.log(comment);
                $.ajax({
                    type:'POST',
                    url:'./../../addArticleComment',
                    data:comment,
                    success:function (data) {
                        console.log(data);
                    }
                })

            }

        },
        watch: {
        }
    })

    $(function () {
        var current_href=window.location.href;
        var n=current_href.split('/');
        var articleCode=n[5];
        console.log(articleCode);
        var article;
        $.ajax({
            type: 'GET',
            url: './../get_libraryDetail',
            data:'articleCode='+articleCode,
            success:function(data) {
                console.log(data);
                vm_libraryDetail.libraryDetail = data[0];
                article = data[0].article;
                console.log(article);
                var date=data[0].articleDate.split(' ');
                vm_libraryDetail.articleDate=date[0];
                vm_libraryDetail.article=marked(article);
            }
        });
    });
</script>
</body>
</html>
